<template>
  <div v-loading="isLoading" class="panel-property">
    <div class="content">
      <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" :component-style="form.componentStyle" />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <BaseOption v-if="isIcon" :form="form" option="multiSortBy" />
        <ComponentTypePopup :config="config" :form="form" />
        <VsFormItem v-if="!isIcon" :label="$demoi18n('word.numberCount')">
          <el-select
            v-model="form.count"
            :popper-class="'select-poper-' + xvueTheme"
            :placeholder="$demoi18n('word.plsSelect')"
            size="default"
            @change="count = $event"
          >
            <el-option
              v-for="item in countOptions"
              :key="item.value"
              class="count-option"
              :label="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </VsFormItem>
        <VsFormItem v-if="!isIcon" prop="unit" :label="$demoi18n('word.unit')">
          <el-input v-model="form.unit" :placeholder="$demoi18n('placeholder.enterUnit')" size="default"></el-input>
        </VsFormItem>
        <VsFormItem v-if="!isIcon" label="Tooltip">
          <BaseOption :form="form" option="tooltip" :widget-instance-id="widgetInstanceId" :config="config" />
        </VsFormItem>
        <div v-if="isIcon" class="config-table">
          <div class="top-btns">
            <el-button
              class="btn-sure"
              size="default"
              icon="CirclePlus"
              :disabled="addDisable"
              @click.stop="addNewRow(temp, item, 'data')"
            >
              {{ $demoi18n('btn.add') }}
            </el-button>
            <BaseOption :form="form" option="tooltip" :widget-instance-id="widgetInstanceId" :config="config" />
          </div>
          <el-table
            class="config-panel-table mapping-table"
            :data="form.data"
            :row-style="{ height: '25px' }"
            :header-row-style="{ height: '25px' }"
            max-height="235"
            :header-cell-style="{ lineHeight: '15px' }"
          >
            <el-table-column type="index" :label="$demoi18n('word.serialNumber')" :width="35"></el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              prop="name"
              :label="$demoi18n('word.name')"
              :min-width="110"
            >
              <template #default="scope">
                <VsFormItem
                  :prop="`data[${scope.$index}].name`"
                  :rules="
                    generateRules({
                      required: false,
                    })
                  "
                >
                  <ValueInputer v-model:value="scope.row.name" :enum-values="nameListSeries" />
                </VsFormItem>
              </template>
            </el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              prop="name"
              :label="$demoi18n('panel.th.aliasName')"
              :min-width="110"
            >
              <template #default="scope">
                <VsFormItem
                  :prop="`data[${scope.$index}].alias`"
                  :rules="
                    generateRules({
                      required: false,
                    })
                  "
                >
                  <el-input v-model="scope.row.alias" size="default"></el-input>
                </VsFormItem>
              </template>
            </el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              prop="unit"
              :label="$demoi18n('word.unit')"
              :min-width="110"
            >
              <template #default="scope">
                <VsFormItem
                  :prop="`data[${scope.$index}].unit`"
                  :rules="
                    generateRules({
                      required: false,
                    })
                  "
                >
                  <el-input v-model="scope.row.unit" size="default"></el-input>
                </VsFormItem>
              </template>
            </el-table-column>
            <el-table-column
              v-if="isIcon"
              :render-header="renderTableHeader"
              prop="icon"
              :label="$demoi18n('word.icon')"
              width="45"
            >
              <template #default="scope">
                <IconEditor
                  :icon="scope.row.icon"
                  :component-style="form.componentStyle"
                  :has-sync="true"
                  @save="saveIcon($event, scope.row)"
                  @delete="deleteIcon($event, scope.row)"
                  @sync="syncIcons($event, form.data)"
                />
              </template>
            </el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              prop="isAbsoluteValue"
              :label="$demoi18n('panel.thresholdSetting.absoluteValue')"
              :min-width="120"
            >
              <template #default="scope">
                <el-checkbox v-model="scope.row.isAbsoluteValue"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column width="30">
              <template #default="scope">
                <el-button
                  icon="Delete"
                  :link="true"
                  type="primary"
                  :disabled="delDisable"
                  @click.stop="deleteCurRow(scope.row, 'data')"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <VsFormItem v-if="!isSingleLine" :label="$demoi18n('panel.label.arrangement')" prop="layoutZN">
          <el-radio-group v-model="form.layoutZN">
            <el-radio label="N">{{ $demoi18n('panel.option.NShaped') }}</el-radio>
            <el-radio label="Z">{{ $demoi18n('panel.option.ZShaped') }}</el-radio>
          </el-radio-group>
        </VsFormItem>
        <VsFormItem :label="$demoi18n('panel.label.dynamicAdaptation')">
          <el-switch v-model="form.isDynamicAdapt"></el-switch>
          <DynamicAdaptation
            :config="config"
            :form="form"
            :dyn-options="dynOptions"
            :setting-options="settingOptions"
          />
        </VsFormItem>
        <div class="jump-panel-wrapper" style="text-align: center;">
          <VsFormItem prop="linkType">
            <el-radio-group v-model="form.linkType" size="default" :fill="activeColorRadio" @change="linkTypeChange">
              <el-radio label="link" style="margin-right: 60px">{{ $demoi18n('word.link') }}</el-radio>
              <el-radio label="page">{{ $demoi18n('word.page') }}</el-radio>
            </el-radio-group>
          </VsFormItem>
        </div>
        <div v-if="form.linkType === 'link'" class="jump-panel-wrapper">
          <VsFormItem prop="jumpUrl">
            <el-input
              v-model="form.jumpUrl"
              type="textarea"
              autosize
              :placeholder="$demoi18n('placeholder.plsEnterJumpPageLink')"
            ></el-input>
          </VsFormItem>
        </div>

        <template v-if="form.linkType === 'page'">
          <VsFormItem v-if="!isAurora" :label="$demoi18n('word.site')" prop="siteId">
            <el-select
              v-model="form.siteId"
              :class="'panel-data-select-' + xvueTheme"
              :popper-class="'select-poper-' + xvueTheme"
              size="default"
              style="width:100%;"
              @change="siteChange"
            >
              <el-option
                v-for="site in siteList"
                :key="site.applicationUuid"
                :label="site.name"
                :value="site.applicationUuid"
              ></el-option>
            </el-select>
          </VsFormItem>
          <VsFormItem :label="$demoi18n('word.catalog')" prop="directoryId">
            <el-select
              v-model="form.directoryId"
              :class="'panel-data-select-' + xvueTheme"
              :popper-class="'select-poper-' + xvueTheme"
              size="default"
              style="width:100%;"
              @change="directoryChange"
            >
              <el-option
                v-for="directory in directoryList"
                :key="directory.uuid"
                :label="directory.directoryName"
                :value="directory.uuid"
              ></el-option>
            </el-select>
          </VsFormItem>
          <VsFormItem :label="$demoi18n('word.page')" prop="pageId">
            <el-select
              v-model="form.pageId"
              :class="'panel-data-select-' + xvueTheme"
              :popper-class="'select-poper-' + xvueTheme"
              size="default"
              style="width:100%;"
              @change="pageChange"
            >
              <el-option
                v-for="page in pageList"
                :key="page.uuid"
                :label="page.pageName"
                :value="page.uuid"
              ></el-option>
            </el-select>
          </VsFormItem>
        </template>

        <VsFormItem :label="$demoi18n('panel.label.openInNewPage')" label-width="110px">
          <el-switch v-model="form.isOpenNewPage"></el-switch>
        </VsFormItem>
        <OptionCollapse>
          <!-- 选中效果设置 -->
          <el-collapse-item :title="$demoi18n('rank.selectSetting')" name="selectedStatusSetting">
            <VsFormItem :form="form" path="selectedStatusSetting.show" labelWidth="40%" :confs="fItemConf"></VsFormItem>
            <VsFormItem
              v-if="form.selectedStatusSetting.show"
              :form="form"
              path="selectedStatusSetting.fillColor"
              :confs="fItemConf"
            ></VsFormItem>
            <VsFormItem
              v-if="form.selectedStatusSetting.show"
              :form="form"
              path="selectedStatusSetting.border"
              :confs="fItemConf"
            ></VsFormItem>
            <VsFormItem
              v-if="form.selectedStatusSetting.show"
              :form="form"
              path="selectedStatusSetting.borderColor"
              :confs="fItemConf"
            ></VsFormItem>
            <VsFormItem
              v-if="form.selectedStatusSetting.show"
              :form="form"
              path="selectedStatusSetting.borderSize"
              :confs="fItemConf"
            ></VsFormItem>
            <VsFormItem
              v-if="form.selectedStatusSetting.show"
              :form="form"
              path="selectedStatusSetting.defaultSelected"
              :confs="fItemConf"
            ></VsFormItem>
          </el-collapse-item>
          <!-- 组件设置 -->
          <el-collapse-item :title="$demoi18n('echart.setting.component')" name="cssStyle.grid">
            <BaseOption :form="form" option="cssStyle.grid" :df-css-style-attrs="dfCssStyleAttrs.grid" />
            <VsFormItem :label="$demoi18n('panel.cssStyle.bgColor')" class="range-content">
              <ColorPicker v-model:value="form.backgroundColor" />
            </VsFormItem>
            <VsFormItem :form="form" path="splitLineSetting.show" labelWidth="35%" :confs="fItemConf"></VsFormItem>
            <VsFormItem v-if="form.splitLineSetting.show" :form="form" path="splitLineSetting.color" :confs="fItemConf">
            </VsFormItem>
            <VsFormItem v-if="form.splitLineSetting.show" :form="form" path="splitLineSetting.size" :confs="fItemConf">
            </VsFormItem>
          </el-collapse-item>
          <!-- 标题样式 -->
          <el-collapse-item :title="$demoi18n('panel.label.titleStyle')" name="cssStyle.title">
            <BaseOption :form="form" option="title" />
            <BaseOption :form="form" option="cssStyle.title" :df-css-style-attrs="dfCssStyleAttrs.title" />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
          </el-collapse-item>
          <!-- 名称 -->
          <el-collapse-item :title="$demoi18n('word.name')" name="cssStyle.name">
            <BaseOption :form="form" option="cssStyle.name" :df-css-style-attrs="dfCssStyleAttrs.name" />
          </el-collapse-item>
          <!-- 数值 -->
          <el-collapse-item :title="$demoi18n('word.numValue')" name="cssStyle.value">
            <BaseOption :form="form" option="cssStyle.value" :df-css-style-attrs="dfCssStyleAttrs.value" />
            <!-- 阈值区间 目前双排和单排带图标可显示 -->
            <VsFormItem :label="$demoi18n('word.threshold')">
              <el-button type="primary" class="btn-sure" size="default" @click="openThreshold">
                {{ $demoi18n('btn.thresholdSetting') }}
              </el-button>
            </VsFormItem>
          </el-collapse-item>
          <!-- 单位 -->
          <el-collapse-item :title="$demoi18n('word.unit')" name="cssStyle.unit">
            <BaseOption :form="form" option="cssStyle.unit" :df-css-style-attrs="dfCssStyleAttrs.unit" />
          </el-collapse-item>
          <!-- 数值&单位对齐方式 -->
          <el-collapse-item :title="$demoi18n('multi-value.valueUnitAlignment')" name="cssStyle.valueUnitAlign">
            <BaseOption
              :form="form"
              option="cssStyle.valueUnitAlign"
              :df-css-style-attrs="dfCssStyleAttrs.valueUnitAlign"
            />
          </el-collapse-item>
          <!-- 内容底色 -->
          <el-collapse-item :title="$demoi18n('multi-value.contentBackgroundColor')" name="contentBackgroundColor">
            <VsFormItem :label="$demoi18n('multi-value.gradientFill')" prop="isGradient">
              <el-switch v-model="form.isGradient"></el-switch>
            </VsFormItem>
            <template v-if="form.isGradient">
              <VsFormItem :label="$demoi18n('multi-value.gradientDirection')" prop="gradientDirection">
                <el-radio-group v-model="form.gradientDirection">
                  <el-radio label="horizontal">{{ $demoi18n('panel.option.horizontal') }}</el-radio>
                  <el-radio label="vertical">{{ $demoi18n('panel.option.vertical') }}</el-radio>
                </el-radio-group>
              </VsFormItem>
              <BaseOption
                :form="form"
                option="contentGradientColor"
                :label="$demoi18n('multi-value.contentBackgroundColor')"
                :config="config"
                :color-group="colorGroup"
              />
            </template>
            <template v-else>
              <VsFormItem :label="$demoi18n('multi-value.contentBackgroundColor')" class="range-content">
                <ColorPicker v-model:value="form.contentBackgroundColor" />
              </VsFormItem>
            </template>
            <div><span>{{ $demoi18n('multi-value.innerMarginOfBackgroundColor') }}</span></div>
            <BaseOption :form="form" option="cssStyle.content" :df-css-style-attrs="dfCssStyleAttrs.content" />
          </el-collapse-item>
          <!-- 附加值 -->
          <el-collapse-item name="cssStyle.extra">
            <template #title>
              <slot name="title">
                <span>{{ $demoi18n('word.valueAdded') }}</span>
                <Helptip>{{ $demoi18n('multi-value.valueAdded.tips') }}</Helptip>
              </slot>
            </template>
            <BaseOption :form="form" option="cssStyle.extra" :df-css-style-attrs="dfCssStyleAttrs.extra" />
            <VsFormItem
              :label="$demoi18n('word.fontColor')"
              labelWidth="35%"
              :helptip="$demoi18n('multi-value.valueAdded.thresholdSettingTips')"
            >
              <el-button type="primary" class="btn-sure" size="default" @click="openThresholdValueAdded">
                {{ $demoi18n('btn.thresholdSetting') }}
              </el-button>
            </VsFormItem>
          </el-collapse-item>
          <BaseOption :form="form" option="noDataPromptSetting" />
        </OptionCollapse>
        <BaseOption :form="form" option="componentStyle" @change="onComponentStyleChange" />
        <AdvanceSet :form="form" :set-margin="{ marginLeft: '2px', marginRight: '9px', marginTop: '8px' }"></AdvanceSet>
      </el-form>
    </div>
    <ThresholdSetting
      ref="thresholdSetting"
      :form="form"
      :is-icon="isIcon"
      :config="config"
      :upload-img-list="uploadImgList"
      :active-color-switch="activeColorSwitch"
      :active-color-radio="activeColorRadio"
      :name-list="nameList"
      :show-alpha="true"
      @save="handleThresholdSave"
    />
    <ThresholdSetting
      ref="thresholdSettingValueAdded"
      :form="form.valueAdded"
      :is-icon="true"
      :config="config"
      :upload-img-list="uploadImgList"
      :active-color-switch="activeColorSwitch"
      :active-color-radio="activeColorRadio"
      :name-list="nameListValueAdded"
      :show-alpha="true"
      :show-name="true"
      :field-list="nameListSeries"
      @save="handleThresholdSaveValueAdded"
    />
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script lang="jsx">
import AdvanceSet from '@/components/common/advance-setting/advance-setting.vue';
import BaseOption from '@/components/common/base-option/base-option.vue';
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import DynamicAdaptation from '@/components/common/dynamic-adaptation/dynamic-adaptation.vue';
import Helptip from '@/components/common/helptip/helptip.vue';
import IconEditor from '@/components/common/icon/icon-editor.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import ThresholdSetting from '@/components/common/threshold-setting/threshold-setting';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import EventBus from '@/event-bus/EventBus.js';
import imgUploadBase from '@/mixin/img-upload-base.js';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import dataModel from '@/models/panel-config-data.js';
import { numFormat } from '@/utils/util';
import ComponentTypePopup from '../component/component-type-popup.vue';
import colorGroup from './colorGroup.js';
import dfCssStyleAttrs from './cssStyle-default.js';
import fItemConf from './form-item-config.js';

export default {
  name: 'PanelProperty',
  components: {
    BaseOption,
    ValueInputer,
    ThresholdSetting,
    ComponentTypePopup,
    DynamicAdaptation,
    OptionCollapse,
    ColorPicker,
    IconEditor,
    PanelLabelOverflowTooltip,
    AdvanceSet,
    Helptip,
  },
  mixins: [imgUploadBase, panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget', 'minLen', 'maxLen'],
  data() {
    return {
      alineStyleOptions: [
        {
          value: 'row',
          label: this.$demoi18n('panel.typeSetting.horizontalRow'),
        },
        {
          value: 'column',
          label: this.$demoi18n('panel.typeSetting.verticalRow'),
        },
        {
          value: 'rect',
          label: this.$demoi18n('panel.typeSetting.MNpermution'),
        },
      ],
      dynOptions: ['settingType'],
      settingOptions: [
        {
          label: this.$demoi18n('panel.adapt.fullyAdaptive'),
          value: '0',
        },
        {
          label: this.$demoi18n('panel.adapt.highlyAdaptive'),
          value: '1',
        },
        {
          label: this.$demoi18n('panel.adapt.widthAdaptation'),
          value: '2',
        },
      ],
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      colorGroup: colorGroup,
      isLoading: false,
      countOptions: [],
      form: {
        imgSize: 60,
      },
      addDisable: false,
      item: {
        name: '',
        alias: '',
        unit: '',
        icon: '',
        iconSmall: '',
        uploadList: '',
        extra: '',
        imgUrl: '',
      },
      temp: {},
      delDisable: true,
      isIcon: false,
      isSingleLine: false,
      isTextComposition: false,
      nameList: [],
      nameListValueAdded: [],
      nameListSeries: [],
      dfCssStyleAttrs: {},
      siteList: [],
      directoryList: [],
      pageList: [],
      isAurora: this.$platformName === 'Aurora',
      fItemConf,
    };
  },
  computed: {
    count: {
      get() {
        return this.form.data.length;
      },
      set(v) {
        this.form.data = [];
        const count = v;
        for (let i = 0; i < count; i++) {
          this.temp = JSON.parse(JSON.stringify(this.item));
          this.form.data.push(this.temp);
        }
      },
    },
  },
  watch: {
    'form.data': {
      handler() {
        this.checkLimit();
      },
      deep: true,
    },
  },
  created() {
    // 读取配置
    if (this.config) {
      const form = JSON.parse(JSON.stringify(this.config.config.property));
      if (!form.imgSize) {
        form.imgSize = 60;
      }
      this.form = form;

      // 初始化配置数据
      this.initMultiConfigData();
      this.initDfCssStyleAttrs();
      this.initColor();
    }

    EventBus.$on(`apiDataChanged_${this.widgetInstanceId}`, this.apiDataChanged);
  },
  mounted() {
    dataModel['getSiteListNew']()
      .then(list => {
        this.siteList = list;
        const { name, params: { siteId } = {} } = this.$route || {};
        if (name === 'myWorkSpace' && siteId) {
          const auroraSite = list.find(site => site.applicationUuid === siteId);
          if (auroraSite) {
            this.siteList = [auroraSite];
          }
        }
        if (this.form.linkType === 'page') {
          const currSite = this.siteList.find(site => site.applicationUuid === this.form.siteId);
          if (currSite) {
            this.getSiteSingle(currSite.applicationUuid);
          } else {
            this.form.siteId = '';
            this.form.directoryId = '';
            this.form.pageId = '';
            this.form.jumpUrl = '';
          }
        }
      });
  },
  methods: {
    initColor() {
      const keys = Object.keys(this.colorGroup[this.form.componentStyle]);
      this.form.contentGradientColor = this.form.contentGradientColor || keys[0];
    },
    getSiteSingle(siteId) {
      dataModel.getSiteSingle(siteId).then(res => {
        if (!res || res.length === 0) {
          return;
        }
        this.directoryList = res[0].children;
        if (!this.form.directoryId) {
          return;
        }
        const currDirectory = this.directoryList.find(directory => directory.uuid === this.form.directoryId);
        if (currDirectory) {
          this.pageList = currDirectory.children;
          const currPage = this.pageList.find(page => page.uuid === this.form.pageId);
          if (currPage) {
            this.form.jumpUrl = currPage.url;
          } else {
            this.form.pageId = '';
            this.form.jumpUrl = '';
          }
        }
      });
    },
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },

    // 链接类型改变
    linkTypeChange() {
      this.pageList = [];
      this.form.directoryId = '';
      this.form.pageId = '';
      this.form.jumpUrl = '';
      if (this.isAurora) {
        this.form.siteId = this.siteList[0] && this.siteList[0]['applicationUuid'];
        this.getSiteSingle(this.form.siteId);
      } else {
        this.form.siteId = '';
        this.directoryList = [];
      }
    },

    // 站点改变
    siteChange(val) {
      // 清理旧数据
      this.directoryList = [];
      this.pageList = [];
      this.form.directoryId = '';
      this.form.pageId = '';
      this.form.jumpUrl = '';

      const currSite = this.siteList.find(site => site.applicationUuid === val);
      if (currSite) {
        this.getSiteSingle(currSite.applicationUuid);
      }
    },

    // 目录改变
    directoryChange(val) {
      this.pageList = [];
      this.form.pageId = '';
      this.form.jumpUrl = '';

      const currDirectory = this.directoryList.find(directory => directory.uuid === val);

      if (currDirectory) {
        this.pageList = currDirectory.children;
      }
    },

    // 页面改变
    pageChange(val) {
      this.form.jumpUrl = '';
      const currPage = this.pageList.find(page => page.uuid === val);
      if (currPage) {
        if (this.isAurora) {
          this.form.jumpUrl = `/xvueui/aurora.html#/my-workspace/${currPage.siteUuid}/${currPage.uuid}`;
        } else {
          this.form.jumpUrl = currPage.url;
        }
      }
    },
    onComponentStyleChange() {
      // 主题切换，组件背景色，选中填充色和边框色改变
      this.form.backgroundColor = this.getValByCompStl('#fff', '#0D263A', '#232323');
      this.form.selectedStatusSetting.fillColor = this.getValByCompStl('#eff5fc', '#15344e', '#333');
      this.form.selectedStatusSetting.borderColor = this.getValByCompStl('#eff5fc', '#15344e', '#333');
    },
    initDfCssStyleAttrs() {
      this.dfCssStyleAttrs = dfCssStyleAttrs;
    },
    initMultiConfigData() {
      if (!this.form.threshold || this.form.threshold.length === 0) {
        this.form.threshold = [
          {
            min: 0,
            max: 0,
            text: '',
            color: '',
            icon: '',
            iconSmall: '',
            uploadList: '',
            extra: '',
            imgUrl: '',
          },
        ];
      }
      const { count } = this;
      for (let i = count; i < this.minLen; i++) {
        this.temp = JSON.parse(JSON.stringify(this.item));
        this.form.data.push(this.temp);
      }
      this.form.thresholdDataType = this.form.thresholdDataType || 'number';

      this.delDisable = this.count <= this.minLen;
      this.addDisable = this.count >= this.maxLen;
      this.isIcon = this.form.propertyGroup.indexOf('Icon') > -1;
      this.isSingleLine = this.form.propertyGroup.indexOf('Single') > -1;

      // 两行不带图标有排版功能
      this.isTextComposition = !this.isIcon && !this.isSingleLine;
      this.initCountOptions();
    },
    initCountOptions() {
      for (let i = this.minLen; i <= this.maxLen; i++) {
        this.countOptions.push({
          value: i,
        });
      }
    },
    addNewRow(temp, item, group) {
      const _temp = JSON.parse(JSON.stringify(item));
      this.form[group].push(_temp);
      if (this.count >= this.minLen) {
        this.delDisable = false;
      }
      if (this.count >= this.maxLen) {
        this.addDisable = true;
      }
    },
    deleteCurRow(item, group) {
      const index = this.form[group].indexOf(item);
      this.form[group].splice(index, 1);
      if (this.count <= this.minLen) {
        this.delDisable = true;
      }
      if (this.count <= this.maxLen) {
        this.addDisable = false;
      }
    },
    openThreshold() {
      if (this.$refs.thresholdSetting) {
        this.$refs.thresholdSetting.openDialog();
      }
    },
    openThresholdValueAdded() {
      if (this.$refs.thresholdSettingValueAdded) {
        this.$refs.thresholdSettingValueAdded.openDialog();
      }
    },
    handleThresholdSave(thresholdForm) {
      const { isThreshold, thresholdData, thresholdDataType } = thresholdForm;
      this.form = {
        ...this.form,
        isThreshold,
        threshold: thresholdData,
        thresholdDataType,
      };
    },
    handleThresholdSaveValueAdded(thresholdForm) {
      const { isThreshold, thresholdData, thresholdDataType } = thresholdForm;
      this.form = {
        ...this.form,
        valueAdded: {
          isThreshold,
          threshold: thresholdData,
          thresholdDataType,
        },
      };
    },
    handleCount() {
      this.form.data = [];
      const { count } = this;
      for (let i = 0; i < count; i++) {
        this.temp = JSON.parse(JSON.stringify(this.item));
        this.form.data.push(this.temp);
      }
    },
    checkLimit() {
      const { data } = this.form;
      const nameList = data.map(n => n.name).filter(n => n);
      const aliasList = data.map(n => n.alias).filter(n => n);
      const nameListU = Array.from(new Set(nameList));
      const aliasListU = Array.from(new Set(aliasList));
      if (nameList.length !== nameListU.length || aliasList.length !== aliasListU.length) {
        this.$message.error(this.$demoi18n('message.nameOrAliasRepeated'));
        return false;
      }
      return true;
    },
    apiDataChanged(apiData) {
      if (!apiData) {
        this.nameList = [];
        this.nameListValueAdded = [];
        this.nameListSeries = [];
      } else {
        const arr = apiData.map(n => {
          if (n.y) {
            n.y = numFormat(n.y, true);
            n.y = n.y.toString();
          }
          return n.y;
        });
        const arrValueAdded = apiData.map(n => {
          if (n.y1) {
            n.y1 = numFormat(n.y1, true);
            n.y1 = n.y1.toString();
          }
          return n.y1;
        });
        const arrSeries = apiData.map(n => {
          if (n.s) {
            n.s = n.s.toString();
          }
          return n.s;
        });
        this.nameList = Array.from(new Set(arr));
        this.nameListValueAdded = Array.from(new Set(arrValueAdded));
        this.nameListSeries = Array.from(new Set(arrSeries));
      }
    },
    renderTableHeader({ column }) {
      return (
        <el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
          <span>{column.label}</span>
        </el-tooltip>
      );
    },
  },
};
</script>

<style lang="less">
@import '../../../common/color-picker-panel.less';
</style>
<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .content {
    .prop-form {
      padding: 0 10px;

      .slider-number {
        vertical-align: text-bottom;
        padding-right: 5px;
      }

      .slider-number-left {
        vertical-align: text-bottom;
        padding-right: 15px;
      }

      .slider-number-right {
        vertical-align: text-bottom;
        padding-left: 15px;
      }

      :deep(.el-slider) {
        display: inline-block;
        width: 100px;
      }

      :deep(.el-select) {
        .el-input__inner {
          width: 100%;
        }
      }

      .config-table {
        :deep(.el-table__row > td) {
          border: none;
        }

        :deep(.el-table) {
          .cell {
            padding: 0 3px !important;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .el-input__inner {
              padding: 0 5px !important;
            }
          }

          td,
          th {
            padding: 5px 0 !important;
          }

          :deep(.el-table__row) {
            .el-table_1_column_4,
            .el-table_2_column_6,
            .el-table_2_column_7,
            .el-table_2_column_8 {
              .cell {
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 0;
      }

      .range-content {
        :deep(.el-form-item__content) {
          display: flex;
          min-height: 40px;
          align-items: center;
        }
      }

      .input-number {
        width: 80px;

        :deep(.el-input-number__decrease) {
          width: 19px;
          background-color: #fff;
        }

        :deep(.el-input-number__increase) {
          width: 19px;
          background-color: #fff;
        }

        :deep(.el-input__inner) {
          padding-left: 19px;
          padding-right: 19px;
        }
      }

      .input-number-left {
        margin-right: 25px;
      }

      .color-radio-group {
        background-color: #eeeeee;

        :deep(.el-radio-button__inner) {
          display: inline-block;
          padding: 2px 2px;
          border: 0;
          border-radius: 0;
          height: 24px;
          margin: 2px 2px;
          background: #eeeeee;
        }

        :deep(.is-active) {
          .el-radio-button__inner {
            background-color: #409eff;
          }
        }
      }

      .top-btns {
        .base-option {
          display: inline-block;
          margin-left: 10px;
        }
      }
    }
  }
}

.jump-panel-wrapper {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 15px;

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }

  .jump-text {
    width: 100%;
    line-height: 25px;
    font-size: 12px;

    span {
      color: #ff3b3b;
    }
  }

  :deep(.el-upload--text) {
    width: 100%;

    .el-upload-dragger {
      width: 100%;

      .show-img-wrapper {
        position: relative;
        width: 100%;
        height: 100%;

        .delete-area {
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 0;
          z-index: 99;
          border-color: transparent #409eff;
          /*上下颜色 左右颜色*/
          border-width: 0 40px 40px 0;
          border-style: solid;

          .delete-area-icon {
            position: absolute;
            left: 22px;
            top: 3px;
            color: #ffff;
          }
        }

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>

<style lang="less" scoped>
@import './panel-property.less';

:deep(.el-form-item__label) {
  min-width: unset !important;
}
</style>
